<template>
    <div class="campaign_list_container_template">
        <head-top signin-up='home' @signUpHandler="signUpHandlerCallback" @loginInHandler="loginInHandlerCallback">
        </head-top>

        <div class="main-container">
            <div class="query-result-area">
                <div class="search-form">
                    <el-input placeholder="请输入内容" prefix-icon="el-icon-search" :clearable="true" v-model="queryText"
                              class="input-query">
                    </el-input>
                    <el-button type="primary" class="query-button">查询</el-button>
                </div>
                <div class="query-result">
                    <el-row :gutter="20">
                        <el-col :span="8" v-for="(item, index) in fundingItem" :key="index">
                            <funding-item :fundingItem="item"></funding-item>
                        </el-col>
                    </el-row>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import headTop from 'components/header/head'
    import FundingItem from 'components/common/fundingItem'
    import {mapState, mapMutations, mapActions} from 'vuex'

    export default {
        data() {
            return {
                radio2: 1,
                fundingItem: [
                    /*{
                        projectImage: 'static/img/ex4.png',
                        title: 'HiGame PC - Mini Workstation for Gamers & Creators',
                        desc: 'Latest Intel i7 w/ Radeon RX Vega M graphics, customisable RAM/storage & flexible I/O options.',
                        type: "MUSIC",
                        total: '340,176'
                    },
                    {
                        projectImage: 'static/img/ex3.png',
                        title: 'HiGame PC - Mini Workstation for Gamers & Creators',
                        desc: 'Latest Intel i7 w/ Radeon RX Vega M graphics, customisable RAM/storage & flexible I/O options.',
                        type: "MUSIC",
                        total: '340,176'
                    },
                    {
                        projectImage: 'static/img/ex2.png',
                        title: 'HiGame PC - Mini Workstation for Gamers & Creators',
                        desc: 'Latest Intel i7 w/ Radeon RX Vega M graphics, customisable RAM/storage & flexible I/O options.',
                        type: "MUSIC",
                        total: '340,176'
                    },
                    {
                        projectImage: 'static/img/ex1.png',
                        title: 'HiGame PC - Mini Workstation for Gamers & Creators',
                        desc: 'Latest Intel i7 w/ Radeon RX Vega M graphics, customisable RAM/storage & flexible I/O options.',
                        type: "MUSIC",
                        total: '340,176'
                    }*/
                ],
                queryText: ""
            }
        },

        mounted() {

            var params = {
                userId: this.userId
            }

            this.$store.dispatch('listCampaignByUID', params).then((res) => {
                console.log(res)

                if(0 === res.code) {
                    // 如果查询成功
                    this.fundingItem = res.page.list;
                }


            }).catch((err) => {
                console.log(err)
            })
        },

        components: {
            headTop,
            FundingItem
        },

        computed: {
            ...mapState({
                'userId': state => state.user.userId
            }),
        },

        methods: {
            ...mapActions([
                'listCampaignByUID'
            ]),

            handleOpen() {

            },
            handleClose() {

            },
            //点击图标刷新页面
            reload() {
                window.location.reload();
            },
            signUpHandlerCallback() {

            },
            loginInHandlerCallback() {

            }

        },
    }

</script>

<style lang="scss" scoped>
    @import '../../style/mixin';

    .head_logo {
        left: 0.4rem;
        font-weight: 400;
        @include sc(0.7rem, #fff);
        @include wh(2.3rem, 0.7rem);
        @include ct;
    }

    .campaign_list_container_template {

        .siteLogo {
            svg {
                height: 24px;
                width: 160px;
                fill: #EB1478;
            }
        }

        .explore-header-image {
            background-size: cover;
            background: url('/static/img/ex6.png') no-repeat center;
            height: 240px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            h1 {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 48px;
                font-weight: normal;
                line-height: 48px;
                text-align: center;
                color: white;
            }
            h2 {
                font-family: "Benton Sans", "Helvetica", "sans-serif";
                font-size: 24px;
                line-height: 34px;
                font-weight: normal;
                color: white;
            }
        }

        .main-container {
            display: flex;
            margin: 0 !important;
            padding: 20px;
            .search-filter-area {
                width: 266px;
                text-align: center;
                h2 {
                    color: #2a2a2a;
                    font-family: "Benton Sans Medium";
                    font-size: 16px;
                    font-weight: normal;
                    line-height: 26px;
                    letter-spacing: 0;
                    padding: 30px 0px 30px 0px;
                }
                .seperator {
                    width: 190px;
                    height: 2px;
                    background-color: #dddddd;
                    margin-top: 26px;
                    margin-bottom: 26px;
                    margin-left: 66px;
                }
                .category {
                    .header {
                        font-family: "Benton Sans Medium";
                        font-size: 12px;
                        font-weight: normal;
                        line-height: 18px;
                        letter-spacing: 0;
                        letter-spacing: 0.86px;
                        margin-bottom: 15px;
                        text-transform: uppercase;
                        color: #a8a8a8;
                    }
                    .content {
                        .el-menu {
                            background: transparent;
                        }
                        .time-filter {
                            text-align: left;
                            .item {
                                margin-left: 76px;
                                margin-top: 16px;
                            }
                        }
                    }

                }

            }
            .query-result-area {
                flex: 1;
                .search-form {
                    display: flex;
                    margin-top: 36px;
                    margin-left: 26px;
                    .input-query {
                        width: 80%;
                    }
                    .query-button {
                        margin-left: 26px;
                    }
                }
                .query-result {
                    margin: 26px;
                }

            }
        }

    }

</style>
